<template>
  <div class="maxbox">
    <div id="mapContainer" class="maxbox mapwrap">
      <map-view :searchCenter="true"></map-view>
    </div>
    <!-- <div class="searchbox">
      <a-select
        show-search
        placeholder="输入站点名称在地图上查找"
        option-filter-prop="children"
        :filter-option="filterOption"
        class="w_100"
        @change="onChange"
      >
        <a-icon slot="suffixIcon" type="search" class="f16" />
        <a-select-option
          v-for="item in stations"
          :key="item.uid"
          :value="item.uid"
        >
          {{ item.s_name }}
        </a-select-option>
      </a-select>
     <a-input-search placeholder="请输入站点名称" @search="onSearch">
        <a-icon slot="prefix" type="search" />
        <a-button slot="enterButton">
          搜索
        </a-button>
      </a-input-search> </div>-->

    <!-- 搜索 end -->
    <!-- 中间部分 -->
    <!--
    <section class="center_wrap">
      <a-row type="flex" justify="space-around" align="top">
        <a-col :span="4">
          <div class="itembox">
            <p>温度</p>
            <p><em>25</em>℃</p>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="itembox">
            <p>湿度</p>
            <p><em>75</em>%rh</p>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="itembox">
            <p>PM2.5</p>
            <p><em>100</em>ug/m3</p>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="itembox">
            <p>已派工单</p>
            <p><em>103</em>个</p>
          </div>
        </a-col>
      </a-row>
    </section>-->
    <!-- 中间部分 end -->
    <aside class="aside aside_l flex">
      <div>
        <div class="data_card flex">
          <div class="flexItem card_title">设备类型</div>
          <div class="card_body flex">
            <dev-type
              ref="devType"
              :types="devTypes"
              :counts="devCounts"
            ></dev-type>
          </div>
        </div>
      </div>
      <div>
        <div class="data_card flex">
          <div class="flexItem card_title">告警等级</div>
          <div class="card_body flex">
            <alarm-lv
              ref="alarmLevelChart"
              :counts="alarmLevelCounts"
            ></alarm-lv>
          </div>
        </div>
      </div>
    </aside>
    <aside class="aside aside_r flex">
      <div>
        <div class="data_card flex">
          <div class="flexItem card_title">在线统计</div>
          <div class="card_body flex">
            <state ref="stateChart" :counts="devStateCount"></state>
          </div>
        </div>
      </div>
      <div>
        <div class="data_card flex">
          <div class="flexItem card_title">告警分类</div>
          <div class="card_body flex">
            <alarm ref="alarmTypeChart" :counts="alarmByType"></alarm>
          </div>
        </div>
      </div>
    </aside>
  </div>
</template>

<script>
import { getEx } from "@/services/crud";
export default {
  components: {
    devType: () => import("./index-devType"),
    alarm: () => import("./index-alarm"),
    alarmLv: () => import("./index-alarmLv"),
    //log: () => import("./index-log"),
    state: () => import("./index-state"),
    mapView: () => import("@/components/map/mapView.vue"),
    //online: () => import("./index-online"),
  },
  props: {},
  data() {
    return {
      rankList: [],
      loading: false,
      totalThings: 1000,
      serviceCount: 100,
      devCount: 0,
      devCounts: [],
      onlineCount: 100,
      currentInfo: null,
      offlineCount: 100,
      onlinePercent: 100,
      ipconline: 0,
      ipcoffline: 0,
      activeAlarm: 100,
      alarms: [],
      noAlarmDevCount: 0,
      alarmByType: [],
      devTypes: [],
      force: false,
      devStateCount: [],
      alarmLevelCounts: [],
      boxCount: 0,
    };
  },
  mounted() {
    this.getStaticInfo();
    setInterval(() => {
      this.getStaticInfo();
    }, 20 * 1000);
  },

  methods: {
    // 获取站点列表
    getStaticInfo() {
      let self = this;
      getEx("/system").then((res) => {
        if (res && res.data && res.data.result) {
          let result = res.data.result;
          if (result.length > 0) {
            result.forEach((r) => {
              let alarmCount =
                r.result &&
                r.result["by_alarm"] &&
                r.result["by_alarm"].length > 0
                  ? r.result["by_alarm"][0].count
                  : 0;
              let alarmInfo = { x: r.calc_time, y: alarmCount };
              self.alarms.push(alarmInfo);
            });
            let lastone = result[result.length - 1].result;
            let count = 0;
            let serviceCount = 0;
            this.currentInfo = lastone;
            let models = lastone["by_model"];
            self.devTypes = [];
            self.devCounts = [];
            //let devCount = 0;
            if (models) {
              models = models.sort((a, b) => {
                return b.count - a.count;
              });
              models.forEach((m) => {
                if (!m.is_station) {
                  console.log("***************", m);
                  if (m.model_id === "m_tm" || m.model_id === "m_dm") {
                    return;
                  }
                  //devCount += m.count;
                  count += m.count;
                  if (m.is_station == false) {
                    self.devTypes.push(m.s_name);
                    if (m.s_name === "智能监控箱") {
                      self.boxCount = m.count;
                    }
                    self.devCounts.push(m.count);
                  }
                }
              });
            }

            self.totalThings = count;

            let catalogs = lastone["by_catalog"];
            if (catalogs) {
              catalogs.forEach((c) => {
                if (c.s_name == "服务") {
                  serviceCount += c.count;
                }
              });
              self.serviceCount = serviceCount;
            }
            self.devCount = self.totalThings - self.serviceCount;
            /*
            let state = lastone["by_state_police"];
            if (state) {
              state.forEach((s) => {
                if (s) {
                  if (s.state == 1) {
                    self.onlineCount = s.count;
                    self.offlineCount = this.totalThings - s.count;
                  } else {
                    self.onlineCount = this.totalThings - s.count;
                    self.offlineCount = s.count;
                  }
                }
              });
              self.onlinePercent =
                ((self.onlineCount * 100) / self.totalThings).toFixed(2) + "%";
            }*/
            let statebox = lastone["box_online"];
            if (statebox) {
              self.boxonline = 0;
              self.boxoffline = 0;
              statebox.forEach((s) => {
                if (s) {
                  if (s.state === 1) {
                    self.boxonline = s.count;
                    //self.ipcoffline = this.totalThings - s.count;
                  } //else {
                  //self.boxoffline = s.count;
                  //}
                }
              });
              self.boxoffline = self.boxCount - self.boxonline;
            }

            let stateipc = lastone["ipc_online"];
            if (stateipc) {
              stateipc.forEach((s) => {
                if (s) {
                  if (s.state == 1) {
                    self.ipconline = s.count;
                    //self.ipcoffline = this.totalThings - s.count;
                  } else {
                    self.ipcoffline = s.count;
                  }
                }
              });
            }

            let alarmState = lastone["by_alarm"];
            self.activeAlarm =
              alarmState && alarmState.length > 0 ? alarmState[0].count : 0;

            self.noAlarmDevCount =
              lastone["by_no_alarm"] && lastone["by_no_alarm"].length > 0
                ? lastone["by_no_alarm"][0].count
                : 0;
            let alarmByType = lastone["by_alarm_type"];
            let devnet = 0;
            let devpower = 0;
            if (alarmByType) {
              self.alarmByType = [];
              self.rankList = [];
              alarmByType.forEach((t) => {
                if (t.alarm_name == "设备断网") {
                  devnet = t.count;
                }
                if (t.alarm_name == "市电掉电") {
                  devpower = t.count;
                }
                //self[t.alarm_name] = t.count
                self.alarmByType.push({ x: t.alarm_name, y: t.count });
                self.rankList.push({ name: t.alarm_name, total: t.count });
              });
            }
            if (devnet + devpower != self.boxoffline + self.ipcoffline) {
              devnet = self.boxoffline + self.ipcoffline - devpower;
            }
            self.alarmByType.forEach((a) => {
              if (a.x == "设备断网") {
                a.y = devnet;
              }
            });
            self.rankList.forEach((a) => {
              if (a.name == "设备断网") {
                a.total = devnet;
              }
            });
            self.devStateCount = [
              self.boxonline,
              self.boxoffline,
              self.ipconline,
              self.ipcoffline,
            ];
            /*
            self.devStateCount = [
              self.onlineCount,
              self.offlineCount,
              self.noAlarmDevCount,
              self.totalThings - self.noAlarmDevCount,
            ];*/
            let alarmBylevel = lastone["by_alarm_level"];
            let levelCount = [];
            self.alarmLevelCounts = [];
            if (alarmBylevel) {
              for (let i = 1; i <= 4; i++) {
                let alarmInfo = alarmBylevel.find((a) => {
                  return a.level == i;
                });
                if (!alarmInfo) {
                  levelCount.push(0);
                } else {
                  levelCount.push(alarmInfo.count);
                }
              }
              self.alarmLevelCounts = levelCount;
            }
            self.$nextTick(() => {
              if (!self.$refs.devType) {
                setTimeout(() => {
                  self?.$refs?.devType?.refresh();
                  self?.$refs?.stateChart?.refresh();
                  self?.$refs?.alarmLevelChart?.refresh();
                  self?.$refs?.alarmTypeChart?.refresh();
                }, 500);
              } else {
                self?.$refs?.devType?.refresh();
                self?.$refs?.stateChart?.refresh();
                self?.$refs?.alarmLevelChart?.refresh();
                self?.$refs?.alarmTypeChart?.refresh();
              }
            });
            //let models = lastone["by_model"]
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
